<template>
    <div :class="{ sticky: isSticky }">
        <div class="header" v-show="isSticky">
            <div class="side" @click="go">{{cityName}}</div>
            <div class="title">电影</div>
            <div class="side"></div>
        </div>
        <van-tabs v-model="active" @click="onClick" title-active-color="#ff5f16" line-width="60px" line-height="1.5px">
            <van-tab title="正在热映"></van-tab>
            <van-tab title="即将上映"></van-tab>
        </van-tabs>
    </div>
</template>

<script>
import Vue from "vue";
import { Tab, Tabs } from "vant";

Vue.use(Tab);
Vue.use(Tabs);
export default {
    data() {
        return {
            urls: ["/films/nowPlaying", "/films/comingSoon"],
            active: 0,
            // 默认不采用粘性
            isSticky: false,
            // 城市名称
            cityName: "北京",
        };
    },
    methods: {
        /**
         * name：选项卡的索引或者名称
         * title：van-tab组件的title的值
         */
        onClick(name, title) {
            let url = this.urls[name];
            this.$router.push(url);
        },
        // 去往城市选择页面
        go() {
            this.$router.push("/city");
        },
    },
    // 获取当前的地址，来纠正索引归零的问题
    created() {
        let path = this.$route.path;
        let index = this.urls.indexOf(path);
        this.active = index;
        // 获取城市信息，展示
        this.cityName = localStorage.getItem("cityName") ? localStorage.getItem("cityName") : this.cityName;
    },
    // 挂载完毕
    mounted() {
        // 监听滚动事件
        window.addEventListener("scroll", () => {
            let scrollTop = document.documentElement.scrollTop;
            if (scrollTop > 200) {
                this.isSticky = true;
            } else {
                this.isSticky = false;
            }
        });
    },
};
</script>

<style scoped>
.header {
    height: 44px;
    width: 100%;
    display: flex;
    text-align: center;
    line-height: 44px;
}
.side {
    width: 15%;
    font-size: 13px;
}
.title {
    width: 70%;
    font-size: 17px;
}
/* 顶部的固定效果 */
.sticky {
    position: fixed;
    z-index: 999;
    width: 100%;
    background: #fff;
}
</style>
